<template>
    <div>
        <el-card>
            <el-form :inline="true">
                <el-form-item>
                    <el-input v-model="khinput" placeholder="请输入套餐"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getUserMenu">查询</el-button>
                </el-form-item>

            </el-form>

            <el-table :data="TemplateDown.data" ref="singleTable" style="width: 100%">
                <el-table-column prop="mealName" label="套餐名称">
                </el-table-column>
                <el-table-column prop="cityNum" label="城市数量">
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == 2">失效</span>
                        <span v-if="scope.row.status == 1">生效中</span>
                    </template>
                </el-table-column>
                <el-table-column label="频次">
                    <template slot-scope="scope">
                        <span v-if="scope.row.timesType == 0">分钟</span>
                        <span v-if="scope.row.timesType == 1">小时</span>
                    </template>
                </el-table-column>
                <el-table-column prop="useTime" label="时间">
                </el-table-column>
                <el-table-column label="内容对比">
                    <template slot-scope="scope">
                        <span v-if="scope.row.con == 0">关闭</span>
                        <span v-if="scope.row.con == 1">开启</span>
                    </template>
                </el-table-column>
                <el-table-column label="区域对比">
                    <template slot-scope="scope">
                        <span v-if="scope.row.dns == 0">关闭</span>
                        <span v-if="scope.row.dns == 1">开启</span>
                    </template>
                </el-table-column>

                <el-table-column prop="remark" label="备注">
                </el-table-column>
                <el-table-column>
                    <template slot-scope="scope">
                        <el-button @click="AddSetMenu(scope.row)" type="text" size="small">购买</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </el-card>
        <!-- 弹窗 -->
        <el-dialog title="购买套餐" :visible.sync="AddMenu" width="40%">
            <el-form :model="formInline" class="demo-form-inline" label-width="80px" :label-position="labelPosition">
                <el-form-item label="城市" prop="city">
                    <el-select v-model="formInline.city" multiple filterable placeholder="请选择" @change="changeCity">
                        <el-option v-for="item in Cityptions" :key="item.value" :label="item.label" :value="item.label">
                        </el-option>
                    </el-select>


                </el-form-item>
                <el-form-item label="时间" prop="time">
                    <el-select v-model="formInline.time" filterable placeholder="请选择" style="width: 200px;">
                        <el-option v-for="hour in hours" :key="hour" :label="hour" :value="hour">
                        </el-option>
                    </el-select>
                    <span style="margin: 0 3px;">{{  this.formInline.timestatus }}</span>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="formInline.phone" placeholder="请输入手机号" style="width: 230px;"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="phone">
                    <el-input v-model="formInline.remark" placeholder="请输入备注" style="width: 230px;"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="AddMenu = false">取 消</el-button>
                <el-button type="primary" @click="AddclickXinZ">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 弹窗 -->
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :page-sizes="[10, 50, 100, 1000]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
            :total="TemplateDown.total" style="margin: 20px 0;float: right;">
        </el-pagination>
    </div>
</template>

<script>


import { UserSetmenu, AllCities,UserAddTao } from "@/api/table"
export default {
    data() {
        return {
            khinput: '',
            pageCode: 1,
            pageSize: 10,
            TemplateDown: [],
            AddMenu: false,
            Cityptions: [],
            labelPosition:'right',
            formInline: {
                id: '',
                city: '',
                phone:'',
                time:'',
                remark:'',
                timestatus:''
            },
            hours: []
        };
    },
    created() {
        this.getUserMenu()
        this.QueryAllCities()
        this.generateHours();
    },
    methods: {
        async getUserMenu() {
            let res = await UserSetmenu({ meals: this.khinput, currentPage: this.pageCode, PageSize: this.pageSize })
            if (res.code === 200) {
                this.TemplateDown = res
            } else {
                this.$message.error(res.msg)
            }
        },
        async AddclickXinZ(){
            let result = this.formInline.city.join(", ")
            let res  = await UserAddTao({
                mealId:this.formInline.id,
                cities: result,
                times:this.formInline.time,
                phoneNumber:this.formInline.phone,
                remark:this.formInline.remark
            })
            console.log(res,"添加成功")
           if(res.code === 200){
            this.AddMenu = false
           }else{

           }
        },
        async AddSetMenu(row) {
            this.AddMenu = true
            this.formInline.id = row.id
            if(row.timesType === 0){
                this.formInline.timestatus = '分钟'
            }else if(row.timesType === 1){
                this.formInline.timestatus = '小时'
            }
        },
        changeCity() {
            console.log(this.formInline.city, "城市选择")
        },
        async handleSizeChange(val) {
            this.pageSize = val;
            this.getUserMenu()
        },
        async handleCurrentChange(val) {
            this.pageCode = val;
            this.getUserMenu()

        },
        async QueryAllCities() {
            let res = await AllCities()
            const result = res.data
            // const names = result.map(item => item.label);
            this.Cityptions = result
        },
        generateHours() {
            for (let i = 1; i <= 24; i++) {
                this.hours.push(i.toString().padStart(2, ''));
            }
        },

    },
};
</script>

<style lang="scss" scoped></style>